<template>
  <div class="dialog-wrapper">
    <el-dialog :title="form.id? '编辑项目':'创建项目'" :visible.sync="visible" :close-on-click-modal="false" :append-to-body="true" width="800px">
      <el-form :model="form" ref="form" :rules="rules">
        <div class="project-wrapper">
          <div class="project-main-content">
             <div class="left">
              <div class="menu-list">
                <div v-for="item in menuList" :key="item.index" @click="selectMenu(item)" :class="{'active': currentIndex === item.index}" class="menu-item">
                  <span><i class="menu-icon" :class="item.icon"></i>{{item.name}}</span>
                </div>
              </div>
            </div>
            <div class="right">
              <div v-show="currentIndex === 1">
                <el-row>
                  <el-col :span="6"><div class="grid-content bg-purple">版块名称
                  <span style='color:red;'>*</span></div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-select v-model="form.taskBelongId" placeholder="点击选择" style="width: calc(100% - 90px);" :disabled="!canEdit">
                      <el-option 
                      v-for="value in plateList"
                      :key="value.id"
                      :label="value.plateName"
                      :value="value.id"
                      :disabled="value.hasProjectCreateAuthority === '0'">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 20px;">
                  <el-col :span="6"><div class="grid-content bg-purple">项目名称
                  <span style='color:red;'>*</span></div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-input type="text" v-model="form.taskName" placeholder="必填项，限制字符30个" style="width: calc(100% - 90px);" :disabled="!canEdit"></el-input>
                    <div class="module-cover">
                      <img :src="form.taskUrl? 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/project/'+form.taskUrl : 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/project/icon%20orange-1.png'"  style="width: 70px; height: 70px;display:block;border-radius: 5px;">
                      <div class="click-block" @click="openCoverChange" v-if="canEdit">更换图片</div>
                    </div>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 20px;">
                  <el-col :span="24">
                    <div class="grid-content bg-purple">起止时间 <span style='color:red;'>*</span></div>
                    <el-date-picker
                      v-model="projectTime"
                      type="daterange"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :disabled="!canEdit"
                      @change="changePlanTime">
                    </el-date-picker>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 20px;">
                  <el-col :span="6"><div class="grid-content bg-purple">项目描述</div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-input type="textarea" v-model="form.taskInfo" :rows="6" placeholder="请输入项目描述" :disabled="!canEdit"></el-input>
                  </el-col>
                </el-row>
              </div>
              <div v-show="currentIndex === 2">
                <el-row>
                    <el-col :span="6"><div class="grid-content bg-purple">可见范围</div></el-col>
                </el-row>
                <el-row>
                    <el-radio-group v-model="form.taskRange" style="width: 100%">
                        <el-radio label="1" :disabled="!canEdit">团队所有人</el-radio>
                        <el-radio label="2" :disabled="!canEdit">项目负责人、项目管理员、项目成员</el-radio>
                    </el-radio-group>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col :span="24"><div class="grid-content bg-purple">项目负责人 <span style='color:red;'>*</span></div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="select-btn" v-if="dingUserList.principal.id.length > 0">
                      <span><img :src="dingUserList.principal.img[0]"/></span>{{dingUserList.principal.name[0]}}
                      <div v-if="canEdit" class="del" @click="delMember('principal', index)">移除</div>
                    </div>
                    <div v-else @click="selectDingUsers('principal')" class="select-btn"><span><i class="el-icon-plus"></i></span>请选择</div>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 20px;">
                    <el-col :span="24"><div class="grid-content bg-purple">项目确认人 <span style='color:red;'>*</span></div></el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="select-btn" v-if="dingUserList.confirm.id.length > 0">
                      <span><img :src="dingUserList.confirm.img[0]"/></span>{{dingUserList.confirm.name[0]}}
                      <div v-if="canEdit" class="del" @click="delMember('confirm', index)">移除</div>
                    </div>
                    <div v-else @click="selectDingUsers('confirm')" class="select-btn"><span><i class="el-icon-plus"></i></span>请选择</div>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 20px;">
                  <el-col :span="24"><div class="grid-content bg-purple">项目管理员</div></el-col>
                  <el-col :span="24">
                    <div @click="selectDingUsers('manage', 100)" class="select-btn"><span><i class="el-icon-plus"></i></span>添加</div>
                    <div class="select-btn has-permission" v-for="(item, index) in dingUserList.manage.id" :key="item.index">
                      <span><img :src="dingUserList.manage.img[index]" /></span>{{dingUserList.manage.name[index]}}
                      <div v-if="canEdit" class="del" @click="delMember('manage', index)">移除</div>
                    </div>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 20px;">
                  <el-col :span="24"><div class="grid-content bg-purple">项目成员
                    <el-checkbox :disabled="!canEdit" v-model="form.taskAutoJoin" :checked="true">任务参与人自动加入</el-checkbox>
                    <el-tooltip effect="dark" placement="top">
                      <div slot="content" style="width: 200px;">任务参与人包括创建人、指派人、负责人、确认人。无论项目对任务参与人是否可见，任务参与人都可在任务模块查看自己参与的任务。</div>
                      <i class="el-icon-info"></i>
                    </el-tooltip>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div @click="selectDingUsers('cc', 300)" class="select-btn"><span><i class="el-icon-plus"></i></span>添加</div>
                    <div class="select-btn has-permission" v-for="(item, index) in dingUserList.cc.id" :key="item.index">
                      <span><img :src="dingUserList.cc.img[index]" /></span>{{dingUserList.cc.name[index]}}
                      <div v-if="canEdit" class="del" @click="delMember('cc', index)">移除</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div v-show="currentIndex === 3">
                <el-row>
                  <el-col :span="24"><div class="grid-content bg-purple">创建任务
                  <span style="font-size: 12px;">谁可以在项目内创建任务，包含任务的导入</span></div></el-col>
                  <el-col :span="24">
                    <el-checkbox-group v-model="createRoleList" v-for="value in roleList" :key="value.index" :value="value.index">
                      <span v-if="value.index <= 3" class="checkboxs">
                        <el-checkbox :disabled="!canEdit" :label="value.index">{{value.name}}</el-checkbox>
                      </span>
                    </el-checkbox-group>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 20px;">
                  <el-col :span="24"><div class="grid-content bg-purple">修改任务
                  <span style="font-size: 12px;">谁可以修改任务，包含任务的重启、移动</span></div></el-col>
                  <el-col :span="20">
                    <el-checkbox-group v-model="modifyRoleList" v-for="value in roleList" :key="value.index" :value="value">
                      <span class="checkboxs">
                        <el-checkbox :disabled="!canEdit" :label="value.index">{{value.name}}</el-checkbox>
                      </span>
                    </el-checkbox-group>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 20px;">
                  <el-col :span="24"><div class="grid-content bg-purple">删除任务
                  <span style="font-size: 12px;">谁可以终止任务与删除任务</span></div></el-col>
                  <el-col :span="20">
                    <el-checkbox-group v-model="deleteRoleList" v-for="value in roleList" :key="value.index" :value="value">
                      <span class="checkboxs">
                        <el-checkbox :disabled="!canEdit" :label="value.index">{{value.name}}</el-checkbox>
                      </span>
                    </el-checkbox-group>
                  </el-col>
                </el-row>
              </div>
              <div v-show="currentIndex === 4">
                <el-row>
                  <el-col :span="24"><div class="grid-content bg-purple" style="font-size: 16px;">导出任务
                  <span style="font-size: 13px;">将项目内的任务导出为Excel制作报表</span></div></el-col>
                  <el-col :span="24">
                    <el-button @click="exportProject" :disabled="!canMoreEdit" size="small">导出</el-button>
                  </el-col>
                </el-row>
                <!-- <el-row style="margin-top: 20px;">
                  <el-col :span="24"><div class="grid-content bg-purple" style="font-size: 16px;">复制项目
                  <span style="font-size: 13px;">通过复制来快速创建一个项目</span></div></el-col>
                  <el-col :span="24">
                    <el-button @click="copyProject" :disabled="!canEdit" size="small">复制</el-button>
                  </el-col>
                </el-row> -->
                <el-row style="margin-top: 20px;">
                  <el-col :span="24"><div class="grid-content bg-purple" style="font-size: 16px;">归档项目
                  <span style="font-size: 13px;">如项目已完成或需要隐藏，可归档项目</span></div></el-col>
                  <el-col :span="24">
                    <el-button @click="archiveProject" :disabled="!canMoreEdit" size="small">归档</el-button>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                  <el-col :span="24"><div class="grid-content bg-purple" style="font-size: 16px;">删除项目
                  <span style="font-size: 13px;">项目删除后不可找回</span></div></el-col>
                  <el-col :span="24">
                    <el-button @click="delProject" :disabled="!canMoreEdit" size="small">删除</el-button>
                  </el-col>
                </el-row>
              </div>
            </div> 
          </div>
          <div>
            <div style="float:right;line-height: 50px; margin-right: 20px;">
              <el-button type="primary" @click="submitForm" size="small" v-if="canEdit">保存</el-button>
              <el-button @click="visible = false" size="small">关闭</el-button>
            </div>
          </div>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="选择图片" :visible.sync="coverDialog" width="440px" :append-to-body="true">
      <div class="cover-wrapper">
        <div v-for="cover in 15" :key="cover">
          <img :src="'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/project/icon%20orange-' + cover + '.png'" style="width: 70px; height: 70px;display:block;border-radius: 5px;">
          <div class="click-block" @click="selectCover('icon%20orange-' + cover + '.png')">选择</div>
        </div>
      </div>
      </el-dialog>
    </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from '@/utils/formUtil'

export default {
    data() {
        return {
            headers: {
                token: this.$cookie.get('token')
            },
            visible: false,
            currentIndex: 1,
            menuList: [{
                index: 1,
                icon: 'el-icon-document',
                name: '基本信息'
            },{
                index: 2,
                icon: 'el-icon-user',
                name: '人员范围'
            },{
                index: 3,
                icon: 'el-icon-question',
                name: '操作权限'
            },{
                index: 4,
                icon: 'el-icon-thumb',
                name: '更多操作'
            }],
            roleList: [{
                index: '1',
                name: '项目负责人'
            },{
                index: '2',
                name: '项目管理员'
            },{
                index: '3',
                name: '项目成员'
            },{
                index: '4',
                name: '任务创建人'
            },{
                index: '5',
                name: '任务负责人'
            },{
                index: '6',
                name: '任务确认人'
            }],
            plateList: [],
            projectTime: [],  //项目起止时间
            createRoleList: [],
            modifyRoleList: [],
            deleteRoleList: [],
            dingUserList: { 
                principal: { id: [], img: [], name: []},
                confirm: { id: [], img: [], name: []},
                manage: { id: [], img: [], name: []},
                cc: { id: [], img: [], name: []},
            },
            form: {
                taskName: '',
                taskUrl: '',
                taskInfo: '',
                taskBelongId: '',
                taskBelongName: '',
                taskRange: 0,
                taskPrincipalId: '',
                principalAvatar: '',
                taskPrincipalName: '',
                taskConfirmId: '',
                confirmAvatar: '',
                taskConfirmName: '',
                taskManageId: '',
                managerAvatar: '',
                taskManageName: '',
                taskCcId: '',
                ccAvatar: '',
                taskCcName: '',
                taskAutoJoin: '',        //任务参与人是否自动加入到项目成员中(1:是（默认勾选），0否)
                taskCreateRole: '',     //项目或任务中任务创建角色(1:项目负责人，2：项目管理员，3：项目成员)
                taskModifyRole: '',     //项目或任务中任务修改角色(1:项目负责人，2：项目管理员，3：项目成员，4：任务创建人，5：任务负责人，6：任务确认人)
                taskDeleteRole: '',     //项目或任务中任务删除角色(1:项目负责人，2：项目管理员，3：项目成员，4：任务创建人，5：任务负责人，6：任务确认人)
                taskDatatype: 0,        //数据类型（1：项目，2：任务,3：子任务）
                taskStatus: 0,
                taskAttachment: []
            },
            rules: {
                taskBelongId: '请选择所属版块',
                taskName: '请输入项目名称'
            },
            coverDialog: false
        }
    },
    mixins: [dingMixin],
    computed: {
      canEdit() {
        return (this.form.taskDeleteStatus === '0' && this.form.hasProjectAuthority === '1' && !!this.form.id) || (!this.form.id)
      },
      canMoreEdit() {
        return this.form.taskDeleteStatus === '0' && this.form.hasProjectAuthority === '1' && !!this.form.id
      },
    },
    methods:{
        async init (id) {
          formUtil.resetData(this.form);
          formUtil.resetData(this.dingUserList);
          this.visible = true;
          this.currentIndex = 1;
          await this.getPlateList();
          this.projectTime = [];
          if (id) {
            this.form = await this.$httpN.postB('division/task/projectInfo', {id: id});
            if (this.form.taskPrincipalId !== '') this.dingUserList.principal.id = this.form.taskPrincipalId.split(',');
            if (this.form.principalAvatar !== '') this.dingUserList.principal.img = this.form.principalAvatar.split(',');
            if (this.form.taskPrincipalName !== '') this.dingUserList.principal.name = this.form.taskPrincipalName.split(',');
            if (this.form.taskConfirmId !== '') this.dingUserList.confirm.id = this.form.taskConfirmId.split(',');
            if (this.form.confirmAvatar !== '') this.dingUserList.confirm.img = this.form.confirmAvatar.split(',');
            if (this.form.taskConfirmName !== '') this.dingUserList.confirm.name = this.form.taskConfirmName.split(',');
            if (this.form.taskManageId !== '') this.dingUserList.manage.id = this.form.taskManageId.split(',');
            if(this.form.managerAvatar !== '')  this.dingUserList.manage.img = this.form.managerAvatar.split(',');
            if (this.form.taskManageName !== '') this.dingUserList.manage.name = this.form.taskManageName.split(',');
            if (this.form.taskCcId !== '')  this.dingUserList.cc.id = this.form.taskCcId.split(',');
            if (this.form.ccAvatar !== '')  this.dingUserList.cc.img = this.form.ccAvatar.split(',');
            if (this.form.taskCcName !== '')  this.dingUserList.cc.name = this.form.taskCcName.split(',');

            this.projectTime = [this.form.taskStartTime, this.form.taskEndTime];
            this.form.taskAutoJoin === '1' ? this.form.taskAutoJoin = true : this.form.taskAutoJoin = false;
            if(this.form.taskCreateRole !== '') this.createRoleList = this.form.taskCreateRole.split(',');
            if(this.form.modifyRoleList !== '') this.modifyRoleList = this.form.taskModifyRole.split(',');
            if(this.form.deleteRoleList !== '') this.deleteRoleList = this.form.taskDeleteRole.split(',');
          } else {
            this.createRoleList = ['1', '2', '3'];
            this.modifyRoleList = ['1', '2', '3'];
            this.deleteRoleList = ['1', '2'];
            this.form.taskUrl = 'icon%20orange-1.png';
            this.form.taskStatus = '1';
            this.form.taskDatatype = '1';
            this.form.taskRange = "2";
            this.form.taskAutoJoin = true;
          }
        },
        selectMenu(item) {
            this.currentIndex = item.index;
            this.$emit("selectMenu", item.index, 1);
        },
        selectDingUsers(showName, number=1){
          if(!this.canEdit) return;
          this.complexPicker(number, [] , this.dingUserList[showName].id).then(
            data=>{
              this.dingUserList[showName].id = [];
              this.dingUserList[showName].img = [];
              this.dingUserList[showName].name = [];
              this.dingUserList[showName].id = data.map(item => item.emplId);
              this.dingUserList[showName].img = data.map(item => item.avatar);
              this.dingUserList[showName].name = data.map(item => item.name);
            }
          )
        },
        delMember(showName, index) {
          this.dingUserList[showName].id.splice(index,1);
          this.dingUserList[showName].img.splice(index,1);
          this.dingUserList[showName].name.splice(index,1);
        },
        getDate() {
          let date = new Date();
          let m = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1;
          let d = date.getDate()+1 < 10 ? '0'+(date.getDate()+1) : date.getDate()+1;
          return date.getFullYear()+'-'+m+'-'+d;
        },
        //获取版块列表
        async getPlateList(){
          await this.$httpN.postB('division/plate/list',{participateType: 2, limit: 999, page: 1}).then(res => {
            this.plateList = res.list;
          })
        },
        changePlanTime(e) {
          if (e) {
            let startTime = e[0];
            let endTime = e[1];
            this.projectTime = [startTime, endTime];
            this.form.taskStartTime = startTime;
            this.form.taskEndTime = endTime;
          } else {
            this.form.taskStartTime = "";
            this.form.taskEndTime = "";
          }
        },
        async submitForm() {
          if(!formUtil.verifyData(this.form, this.rules)) return;
          if(this.form.taskName.length > 30) return this.$message.error('项目名称不要超过30个字');
          if(!this.form.taskStartTime) return this.$message.error('请选择项目开始时间');
          if(!this.form.taskEndTime) return this.$message.error('请选择项目结束时间');
          if(this.dingUserList.principal.id.length === 0 ) return this.$message.error('请选择项目负责人');
          if(this.dingUserList.confirm.id.length === 0 ) return this.$message.error('请选择项目确认人');
          this.plateList.forEach(item => {
            if (item.id === this.form.taskBelongId) {
              this.form.taskBelongName = item.plateName;
              return false;
            }
          })
          this.form.taskPrincipalId = this.dingUserList.principal.id.join(',');
          this.form.principalAvatar = this.dingUserList.principal.img.join(',');
          this.form.taskPrincipalName = this.dingUserList.principal.name.join(',');
          this.form.taskConfirmId = this.dingUserList.confirm.id.join(',');
          this.form.confirmAvatar = this.dingUserList.confirm.img.join(',');
          this.form.taskConfirmName = this.dingUserList.confirm.name.join(',');
          this.form.taskManageId = this.dingUserList.manage.id.join(',');
          this.form.managerAvatar = this.dingUserList.manage.img.join(',');
          this.form.taskManageName = this.dingUserList.manage.name.join(',');
          this.form.taskCcId = this.dingUserList.cc.id.join(',');
          this.form.ccAvatar = this.dingUserList.cc.img.join(',');
          this.form.taskCcName = this.dingUserList.cc.name.join(',');
          this.form.taskAutoJoin ? this.form.taskAutoJoin = '1' : this.form.taskAutoJoin = '0';
          this.form.taskCreateRole = this.createRoleList.join(',');
          this.form.taskModifyRole = this.modifyRoleList.join(',');
          this.form.taskDeleteRole = this.deleteRoleList.join(',');

          if(this.form.id) this.form.taskCreateTime = '';
          if(!await this.$httpN.postB(this.form.id ? 'division/task/projectOrTaskUpdate': 'division/task/projectOrTaskSave', this.form));
          this.visible = false;
          this.$emit('refresh');
          formUtil.submitSuccess('保存成功');
        },
        //导出项目
        async exportProject() {
          let fileData = await this.$httpN.get('division/task/export/' + this.form.id, {}, 'blob');
          let fileName = this.form.taskBelongName + ' - ' + this.form.taskName + '.xls';
          this.downFile(fileData, fileName);
        },
        downFile(blob, fileName) {
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName);
          } else {
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;
            link.click();
            window.URL.revokeObjectURL(link.href);
          }
        },
        //复制项目
        copyProject() {
          this.form.id = null;
          this.form.taskName = '' ;
          this.currentIndex = 1;
          this.$message('项目已复制，请保存');
        },
        //归档项目
        async archiveProject() {
          formUtil.submitConfirm('是否将此项目归档?', async ()=> {
            if(!await this.$httpN.postB('division/task/archive',{id: this.form.id})) return;
            this.$message('项目已归档');
            this.visible = false;
            this.$emit('closeProjectDetail');
            this.$emit('refresh');
          })
        },
        //删除项目
        async delProject() {
          formUtil.submitConfirm('此操作将永久删除项目, 是否继续?', async ()=> {
            if(!await this.$httpN.postB('division/task/projectOrTaskDelete',{id: this.form.id})) return;
            formUtil.submitSuccess('删除成功');
            this.visible = false;
            this.$emit('closeProjectDetail');
            this.$emit('refresh');
          })
        },
        openCoverChange() {
          this.coverDialog = true;
        },
        selectCover(img) {
          this.coverDialog = false;
          this.form.taskUrl = img
        },
    }
}
</script>

<style lang="scss" scoped>
.project-wrapper {
  height: 550px;
  margin: -30px -20px;
  border-top: 1px solid #ECECEC;
  .project-main-content {
    height: 500px;;
    display: flex;
    border-bottom: 1px solid #ECECEC;
    .left {
      width: 145px;
      z-index: 1;
      background: #FFF;
      box-shadow: 3px 0 4px #F0F0F0;
      .menu-list{
        .menu-item{
        line-height: 40px;
        padding-left: 50px;
        color: #75797E;
        cursor: pointer;
        position: relative;
        &:hover{
            background: #F7F7F7;
        }
        .menu-icon{ 
          position:absolute;
          left: 24px;
          top: 11px;
          font-size: 18px;
          font-weight: normal;
        }
        }
      .menu-item.active{
        color: #4983FF;
        background: #ECF1FD;
        &::before{
            content: '';
            height: 100%;
            width: 5px;
            background: #4983FF;
            position: absolute;
            top: 0;
            left: 0;
        }
      }
    }
  }
}
.right::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.right {
    position: relative;
    flex:1 ;
    padding: 20px;
    line-height: 36px;
    height: 500px;
    overflow: auto;
    .select-btn{
      float:left;
      font-weight: normal;
      margin-right: 5px;
      margin-bottom: 10px;
      width: 80px;
      height: 28px;
      border-radius: 30px;
      background: #FAFAFA;
      border: 1px solid #ECECEC;
      position: relative;
      padding-left: 21px;
      line-height: 28px;
      color: #7982A7;
      font-size: 12px;
      text-align: center;
      cursor: pointer;
      span{
        position: absolute;
        top: 1px;
        left: 1px;
        display:block;
        height: 24px;
        width: 24px;
        background: #CACACA;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
        img{
          width: 24px;
          height: 24px;
          border-radius: 50%;
        }
      }
      .del{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 30px;
        color: white;
        text-align: center;
        background:rgba(130, 130, 130, 0.9);
        display: none;
      }
      &:hover{
        .del, .close{
          display: block;
        }
      }
    }
    .checkboxs {
      float: left;
      margin-right: 30px;
    }
  }
}
.dialog-footer{
  margin-bottom: -10px;
}
.module-cover{
  position: absolute;
  height: 70px;
  width: 70px;
  background: #E6A23C;
  color: white;
  line-height: 70px;
  text-align: center;
  top: -34px;
  right: 0;
  font-size: 40px;
  cursor: pointer;
  .click-block{
    width: 100%;
    position: absolute;
    top:0;
    right: 0;
    background:rgba(130, 130, 130, 0.7);
    line-height: 70px;
    text-align: center;
    color: white;
    font-size: 12px;
    display: none;
    border-radius: 5px;
  }
  &:hover{
    .click-block{
      display: block;
    }
  }
}
.cover-wrapper{
  display: flex;
  flex-wrap: wrap;
  div{
    height: 70px;
    width: 70px;
    background: #E6A23C;
    color: white;
    line-height: 70px;
    text-align: center;
    font-size: 40px;
    position: relative;
    margin: 5px;
    .click-block{
      width: 100%;
      position: absolute;
      top: -5px;
      left: -5px;
      background:rgba(130, 130, 130, 0.7);
      line-height: 70px;
      text-align: center;
      color: white;
      font-size: 12px;
      display: none;
      border-radius: 5px;
      cursor: pointer;
    }
    &:hover{
      .click-block{
        display: block;
      }
    }
  }
}
</style>